<template>
  <div class="container">
    <div class="weui_cells_title">就诊卡：</div>
    <div class="weui_cells weui_cells_access" style="margin-top:10px;">
      <div class="weui_cell">
        <div class="weui_cell_hd">
          <i class="fa fa-credit-card fa-2x icon-color" style="width:45px;margin-right:5px;display:block;"></i>
        </div>
        <div class="weui_cell_bd weui_cell_primary">
          <p>{{card?card.name:''}} <span style="margin-left:15px;" class="blue_tag">{{card?card.type:''}}</span></p>
          <p>{{card?card.num:''}}</p>
        </div>
      </div>
    </div>
    <div class="weui_cells_title" v-show="showEmpty">{{emptyMsg}}</div>
    <div v-for="ctg in categories">
      <div class="weui_cells_title" style="font-size:17px;">
        <p> 费用类型：<span style="margin-right:10px;" class="info">{{ctg.categoryName}}</span></p>
        <p> 费用金额：<span class="info">{{ctg.categoryFee}} 元</span></p>
      </div>
      <div class="weui_cells weui_cells_access" style="margin-top:10px;">
        <div v-for="item in ctg.items" class="weui_cell">
          <div class="weui_cell_bd weui_cell_primary">
            <p>
              <span style="display: block;">名称：<span style="color: #0ae;">{{item.itemName}}</span></span>
              <span style="display: block;">规格：<span style="color: #0ae;">{{item.typeName}}</span></span>
              <span style="display: block;width: 100%;">
                <span style="display: inline-block;width: 50%;float: left;">数量：<span style="color: #0ae;">{{item.quantity}}</span></span>
              <span style="display: inline-block;width: 50%;float: left;">单位：<span style="color: #0ae;">{{item.unit}}</span></span>
              </span>
              <span style="display: block;width: 100%;">
                <span style="display: inline-block;width: 50%;float: left;">单价：<span style="color: #0ae;">{{item.unitPrice}} 元</span></span>
              <span style="display: inline-block;width: 50%;float: left;">小计：<span style="color: #0ae;">{{item.price}} 元</span></span>
              </span>
            </p>
          </div>
          <div class="weui_cell_bd">
            <p>
              <span v-show="item.isChild == '1'" class="blue_tag">小孩</span>
            </p>
          </div>
        </div>
      </div>
    </div>
</template>
<style scoped>
.blue_tag {
  background-color: #0ae;
  color: #fff;
  font-size: 13px;
  padding: 2px 4px;
  border: none;
  vertical-align: middle;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

.orange_tag {
  background-color: #ff8208;
  color: #fff;
  font-size: 13px;
  padding: 2px 4px;
  border: none;
  vertical-align: middle;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

span.label {
  display: inline-block;
  width: 100px;
}

span.info {
  color: #0ae;
}
</style>
<script>
import _ from 'underscore'

export default {
  name: 'getInpatientView',
  data: function () {
    return {
      showEmpty: false,
      emptyMsg: '',

      billDate: '',
      patientId: '',
      visitId: '',
      categories: []
    }
  },
  vuex: {
    getters: {
      card: ({ card }) => _.findWhere(card.cards, { isSelected: true })
    }
  },
  methods: {
    getInpatientBill: function () {
      var self = this

      this.$ajax.get('GetDailyBill', 'Inpatient', {
        patientId: this.patientId,
        visitId: this.visitId,
        billDate: this.billDate
      }).then(function (data) {
        if (data.ResultCode !== '0') {
          self.showEmpty = true
          self.emptyMsg = data.ResultMsg
        } else {
          self.categories = _.map(data.Categories, function (val) {
            return {
              categoryName: val.CategoryName,
              categoryFee: val.CategoryFee,
              items: _.map(val.Items, function (item) {
                return {
                  itemName: item.ItemName,
                  typeName: item.TypeName,
                  unit: item.Unit,
                  unitPrice: item.UnitPrice,
                  quantity: item.Quantity,
                  price: item.Price,
                  isChild: item.IsChild
                }
              })
            }
          })
        }
      })
    }
  },
  ready: function () {
    this.billDate = this.$route.query.billDate
    this.patientId = this.$route.query.patientId
    this.visitId = this.$route.query.visitId

    this.$watch('card', function (val) {
      this.getInpatientBill()
    })

    this.getInpatientBill()
  }
}
</script>
